<template>
  <div id="app">
    <!-- 登录对话框 -->
    <el-dialog title="登录" width="24%" :visible.sync="showLoginDialog">
      <el-form>
        <el-form-item>
          <el-input v-model="loginForm.username" placeholder="请输入手机号/邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="loginBtn" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
      <p>登录注册即代表您同意《用户协议》和《隐私协议》</p>
    </el-dialog>
    <!-- 注册对话框 -->
    <el-dialog title="注册" width="24%" :visible.sync="showSigninDialog">
      <el-form>
        <el-form-item>
          <el-input v-model="signinForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="signinForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="signinForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="signinForm.rePassword" type="password" placeholder="请再输入一次密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="signinBtn" type="primary">注册</el-button>
        </el-form-item>
      </el-form>
      <p>登录注册即代表您同意《用户协议》和《隐私协议》</p>
    </el-dialog>
    
      <el-container>
    <el-col :span="20" :offset="2">    
        <!-- 头部区域 -->
        <el-header style="border-bottom: 1px solid #e6e6e6;">
          <el-row  type="flex" align="middle">
            <!-- 网站logo -->
            <el-col :span="6">
              <img style="width: 200px;" src="@/assets/logo.png" />
            </el-col>
            <!-- 顶部菜单 -->
            <el-col :span="12">
              <el-menu mode="horizontal">
                <el-menu-item index="1"><router-link to="/subjectOne">科目一</router-link></el-menu-item>
                <el-menu-item index="2"><router-link to="/subjectTwo">科目二</router-link></el-menu-item>
                <el-menu-item index="3"><router-link to="/subjectThree">科目三</router-link></el-menu-item>
                <el-menu-item index="4"><router-link to="/subjectFour">科目四</router-link></el-menu-item>
                <el-menu-item index="5">交通标志</el-menu-item>
                <el-menu-item index="6">社区</el-menu-item>
              </el-menu>
            </el-col>
            <span v-if="!isLogin">
              <el-link @click="showLoginDialog = true">登录</el-link>
              或
              <el-link @click="showSigninDialog = true">注册</el-link>
            </span>
            <!-- 用户头像 -->
            <el-avatar v-if="isLogin" icon="el-icon-user-solid" style="margin-right: 10px;"></el-avatar>
            <el-dropdown v-if="isLogin">
              <!-- 用户名 -->
              <span class="el-dropdown-link">
                user<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><router-link to="/profile">个人信息</router-link></el-dropdown-item>
                <el-dropdown-item>我的发帖</el-dropdown-item>
                <el-dropdown-item>我的收藏</el-dropdown-item>
                <el-dropdown-item><router-link to="/changePassword">修改密码</router-link></el-dropdown-item>
                <el-dropdown-item divided>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-header>

        <!-- 主体区域 -->
        <el-main>
          <router-view/>

          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
        </el-main>
      </el-col>
        <!-- 底部区域 -->
        <el-footer height="300px">
          <p>地址：河北省石家庄市裕华区河北师范大学  电话：XXX-XXX-XXXX</p>
          <p>冀公网安备 XXXXXXXXXXXXX号  冀ICP备XXXXXXXXXX号</p>
          <p>Copyright © 2021 XXXX有限公司版权所有</p>
        </el-footer>

      </el-container>
    
  </div>
</template>

<script>
export default {
  data(){
    return {
      isLogin: false,
      showLoginDialog: false,   // 是否显示登录对话框
      showSigninDialog: false,   // 是否显示注册对话框
      loginForm: {
        username: '',
        password: ''
      },
      signinForm: {
        phone: '',
        email: '',
        password: '',
        rePassword: ''
      }
    }
  }
}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
.el-footer{
  background-color: #B3C0D1;
  color: white;
  padding-top: 30px;
  p{
    margin-top: 10px;
  }
}
#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.loginBtn{
  width: 100%;
}
.signinBtn{
  width: 100%;
}
</style>
